<template>
	<view class="info-item" @click="clickCard" v-if="acItem && acItem.usrName || acItem && acItem.companyNameCn">
		<uni-card style="position: relative;" :acWidth="acWidth?acWidth:'600rpx'" :isShadow="true" :border="false"  margin="0 0 20rpx 0">
			<view class="u-info1" v-if="version == 1">
				<u-image :lazyLoad="true" width="124rpx" height="124rpx" radius="50%" class="use-img"
					:src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+acItem.headImg">
				</u-image>
				<view class="info-box" >
					<view class="use-text">
						{{acItem.usrName}}
					</view>
					<text class="info-address"
						v-if="acItem.mainBusiness">{{acItem.mainBusiness.split(' ').slice(0,2).join(' ')}}</text>
				</view>
			
				<view class="btn-box"  v-if="hasBtn">
					<button class="btn-item" :style="isApply?'background-color: #666;':'background-color: #2BADFD;'"
						style="color: #FFFDEF;" @click.stop="rightCilck">{{isApply?'申请中':rightText}}</button>
				</view>
				<view style="position: absolute;
				right: 0;
				top: 120rpx;
				border:4rpx solid #1DA9FF;
				height: 70rpx;
				"></view>
			</view>
			<view class="u-info1" v-else>
				<u-image :lazyLoad="true" width="124rpx" height="124rpx" radius="50%" class="use-img"
					:src="'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/'+acItem.companyLogo">
				</u-image>
				<view class="info-box">
					<view class="use-text">
						{{acItem.companyNameCn}}
					</view>
					<text class="info-address"
						v-if="acItem.industryTypeName">{{acItem.industryTypeName.split(' ').slice(0,2).join(' ')}}</text>
				</view>
				<view class="btn-box" v-if="hasBtn">
					<!-- <button class="btn-item" @click.stop="leftCilck"
						style="margin-rigth: 10rpx; background-color: #FFFFFF;border: 1rpx solid #2C8CFF;box-sizing: border-box; color: #000;margin-right: 15rpx;">{{leftText}}</button> -->
					<button class="btn-item" :style="isApply?'background-color: #666;':'background-color: #2C8CFF;'"
						style="color: #FFFDEF;" @click.stop="rightCilck">{{isApply?'申请中':rightText}}</button>
				</view>
			</view>
		</uni-card>
	</view>
</template>
<script>
	import {
		getToken
	} from '@/utils/token.js'
	export default {
		props: {
			acIndex: {
				type: Number,
				default: 0
			},
			acItem: {
				type: Object,
				default: () => {}
			},
			acWidth: {
				type: String,
				default: null
			},
			leftText: {
				type: String,
				default: '极速联系'
			},
			rightText: {
				type: String,
				default: '发消息'
			},
			hasBtn: {
				type: Boolean,
				default: true
			},
			isApply: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				version: getToken('version')
			}
		},
		methods: {
			clickCard() {
				this.$emit('clickCard', {
					item: this.acItem,
					index: this.acIndex
				})
			},
			rightCilck() {
				this.$emit('rightCilck', {
					item: this.acItem,
					index: this.acIndex
				})
			},
			leftCilck() {
				this.$emit('leftCilck', {
					item: this.acItem,
					index: this.acIndex,
					
					
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.info-item {
		position: relative;		margin-right: 10rpx;
		.u-info1 {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.use-img {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
			}

			.info-box {
				margin-top: 24rpx;
				text-align: center;
				margin-bottom: 50rpx;
				.use-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #1DA9FF;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width: 280rpx;
					margin-bottom: 24rpx;
				}

				.info-address {
					line-height: 50rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #8E959E;
					// text-overflow: ellipsis;
					// overflow: hidden;
					// white-space: nowrap;
					// width: 500rpx;
				}
			}

			.btn-box {
				position: absolute;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.btn-item {
					border-radius: 32rpx 0 32rpx 0;
					font-size: 24rpx;
					margin: 0;
					padding: 0;
					width: 150rpx;
				}
			}
		}
	}
</style>
